var rule_turn = document.querySelector(".rule_turn"),
	rule = document.querySelector(".rule"),
	rule_close = document.querySelector(".rule_close"),
	my_prize = document.querySelector(".my_prize"),
	prize = document.querySelector(".prize");

rule_turn.addEventListener("click", function () {
	rule.setAttribute("style", "display:block")
})
rule_close.addEventListener("click", function () {
	rule.setAttribute("style", "display:none")
})

console.log(prize_close);

// 刮刮卡效果
window.onload = function () {
	var content;
	var moveNum = 0; //每次触摸移动都会加1
	var isDown = false;
	var fontEm = parseInt(window.getComputedStyle(document.documentElement, null)["font-size"]);
	var canvas = document.getElementById("c1");
	// var j-back=document.getElementsByTagName("j-back");
	var workFlow = {
		init: function () {
			this.settingCanvas();
			this.bindEvent();
		},
		bindEvent: function () {
			var _this = this;
			if (canvas != null) {
				//PC端的处理
				canvas.addEventListener("mousemove", _this.eventMove, false);
				canvas.addEventListener("mousedown", _this.eventDown, false);
				canvas.addEventListener("mouseup", _this.eventUp, false);
				canvas.addEventListener("mouseout", _this.eventOut, false);
				//移动端的处理
				canvas.addEventListener('touchstart', _this.eventDown, false);
				canvas.addEventListener('touchend', _this.eventUp, false);
				canvas.addEventListener('touchmove', _this.eventMove, false);
				canvas.addEventListener('mouseout', _this.eventOut, false);
			}
		},
		settingCanvas: function () {
			canvas.width = canvas.clientWidth;
			canvas.height = canvas.clientHeight;
			content = canvas.getContext("2d");
			var image = new Image();
			image.src = "img/card_f.png";
			image.onload = function () {
				var imgHeight = canvas.height,
					imgWidth = canvas.width;
				var sx = (canvas.width - imgWidth) / 2,
					sy = (canvas.height - imgHeight) / 2;
				content.globalCompositeOperation = 'source-over';
				content.drawImage(image, sx, sy, imgWidth, imgHeight);
				$('.j-back').show(); //加载完图片后在显示底层的内容
			};
		},
		eventDown: function (e) {
			// 鼠标按下和触摸开始
			e.preventDefault();
			content.globalCompositeOperation = 'destination-out';
			isDown = true;
		},
		eventOut: function (e) {
			// 鼠标移出涂层区域后
			e.preventDefault();
			isDown = false;
		},
		eventUp: function (e) {
			// 鼠标抬起和触摸结束
			var _this = this;
			e.preventDefault();
			isDown = false;
			workFlow.checkFinish();
		},
		eventMove: function (e) {
			moveNum++;
			// 鼠标移动和触摸移动
			e.preventDefault();
			if (e.changedTouches) {
				e = e.changedTouches[e.changedTouches.length - 1];
			}
			if (isDown) {
				var conDivEle = document.getElementById("box");
				var oX = conDivEle.offsetLeft,
					oY = conDivEle.offsetHeight + conDivEle.offsetTop * 3;
				var x = (e.clientX + document.body.scrollLeft || e.pageX) - oX / 2 || 0,
					y = (e.clientY + document.body.scrollTop || e.pageY) - oY || 0;

				//画360度的弧线，就是一个圆，因为设置了content.globalCompositeOperation = 'destination-out';
				//画出来是透明的
				content.beginPath();
				content.arc(x, y, fontEm * 2, 0, Math.PI * 2, true);
				canvas.style.display = 'none';
				canvas.offsetHeight;
				canvas.style.display = 'inherit';
				content.fill();
			}
		},
		checkFinish: function () {
			if (moveNum > 100) {
				// alert('finish');
				prize.setAttribute("style", "display:block");
				content.clearRect(0, 0, canvas.width, canvas.height);
				$('canvas').hide();
			}

		}
	};

	workFlow.init();

}

var prize_close = document.getElementsByClassName("prize_close")[0];
console.log(prize_close);
prize_close.addEventListener("click", function () {
	prize.setAttribute("style", "display:none")
})

// 跑马灯效果
// window.onload = function () {
// 	var marquee = document.querySelector(".marquee"),
// 		hb_copy = document.querySelector(".hb_copy"),
// 		pool_hb = document.querySelector(".pool_hb");
// 	hb_copy.innerHTML = pool_hb.innerHTML;
// 	if (marquee.scrollLeft <= pool_hb.offsetWidth) {
// 		marquee.scrollLeft == 0;
// 		console.log(1);
// 	} else {
// 		pool_hb.scrollLeft++;
// 	}
// }